<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			} 
			.mui-btn {  
				padding: 10px;
			}
			.imgsize{
				height:40px ;
			}
			  
		</style>
	</head>

	<body>  
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">  
			<a id='setting' class="mui-icon mui-icon-gear mui-pull-right"></a>
			<h1 class="mui-title">首页</h1> 
			<!-- <a id='imchat'    class="mui-action-menu mui-icon mui-icon-chat mui-pull-left"></a> -->
			  
		</header>
		<nav class="mui-bar mui-bar-tab">
			<!--<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>-->
			<a id="message" class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">动态</span> 
			</a>
			<!--<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">留言板</span>
			</a>-->
			<a id='imchat'  class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">小木</span>  
			</a>
		</nav> 
		<div class="mui-content">
		 
	 	<div id="tabbar" class="mui-control-content   mui-active"  >
	 			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" style="height: 250px;"> 
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/yuantiao.jpg"    > 
							<p class="mui-slider-title">静静看这世界1</p>
						</a>
					</div>
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/yuantiao.jpg" > 
							<p class="mui-slider-title">静静看这世界2</p>
						</a>
					</div>
					 
					  
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					 <div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/yuantiao.jpg"> 
							<p class="mui-slider-title">静静看这世界</p>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator mui-text-right">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"> </div>
					<div class="mui-indicator"> </div>
					<div class="mui-indicator"> </div>
				</div> 
			</div> 
	 		
	 		   <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a id="boy" href="#"  >
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">男生</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="#" id="gir">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">女生</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a id="qiuzhi" href="#">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">求职</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a id="zhaopin" href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">招聘</div></a></li>
		            
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a id="video" href="#">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">最新电影</div></a></li>
		            <!--  <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="article_main.html">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">Search1</div></a></li>
		          <li class="mui-table-view-cell mui-med1ia mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">Phone</div></a></li>
		           -->
		        </ul> 
		</div>
	 
			  
		</div>
		<script src="js/mui.min.js"></script> 
		<script> 
			(function($, doc) {
				$.init({ 
					 
				});
				   
				var table = document.body.querySelector('.mui-slider-loop');
				 	 
			 	mui.ajax('http://029sj.cn/api.php?s=/News/pic_news/',{
						data:{ 
							startlimit:0, 
							order:'asc',
							do:'up'
						},
						dataType:'json',//服务器返回json格式数据
						type:'get',//HTTP请求类型
						 
						success:function(data){
							var slider_str =' ';
							//获得服务器响应
							mui.each(data.msg, function (i, item) {
								var div = document.createElement('div');
								div.className = 'mui-slider-item';
								div.innerHTML = '<a href="#"  id="'+item.id+'"><img  src="'+item.pic_path+'"><p class="mui-slider-title">'+item.title+'</p></a>'; 
								
								table.appendChild(div);
								/*slider_str.concat(div); 
								console.log(div); console.log(slider_str);*/
								/*table.insertBefore(div, table.firstChild);*/
						    });   
						    
						    var div_over = document.createElement('div');
								div_over.className = 'mui-slider-item';
								div_over.innerHTML = '<a href="#"><img src="images/shuijiao.jpg"><p class="mui-slider-title">幸福就是可以一起睡觉</p></a>'; 
								 
								table.appendChild(div_over); 
						     
						}
					});
				 
				/**
				 *   滑动块 展示图片78
				 */
				var slider = mui("#slider");
				
				slider.slider({ interval: 5000 }); 
				$.plusReady(function() {
					 
					 
					doc.getElementById('boy').addEventListener('tap', function(event) { 
							clickopten(49); 
						});
					doc.getElementById('gir').addEventListener('tap', function(event) { 
							clickopten(50); 
						});
					doc.getElementById('qiuzhi').addEventListener('tap', function(event) { 
							clickopten(52); 
						});
					doc.getElementById('zhaopin').addEventListener('tap', function(event) { 
							clickopten(51); 
						});
						 
						
					function clickopten(cate_id){ 
						$.openWindow({
							id: 'artice',
							url: 'artice_list.html', 
							waiting: { 
								title:'正在加载...',
							},
							extras:{cate_id:cate_id}
						});
					}
					 
					/**
					 *   最新影音
					 */
					doc.getElementById('video').addEventListener('tap', function(event) {
					 
						$.openWindow({
								id: 'video',
								url: 'video.html', 
								 waiting: { 
									title:'正在加载...',
								},
						});
					}); 
					
					/**
					 *   消息按钮
					 */
					doc.getElementById('message').addEventListener('tap', function(event) {
					  
						$.openWindow({
								id: 'article_main',
								url: 'article_main.html', 
								waiting: {
									autoShow: false,
									title:'正在加载...',
								} 
						});
					}); 
					
					/**
					 *   im-chat
					 */
					doc.getElementById('imchat').addEventListener('tap', function(event) {
					  
						$.openWindow({
								id: 'im-chat',
								url: 'im-chat.html', 
								waiting: {
									autoShow: false,
									title:'正在加载...',
								} 
						});
					}); 
					
					
					
				   
				
					var settingPage = $.preload({
						"id": 'setting',
						"url": 'setting.html'
					});
					
					//设置按钮事件
					var settingButton = doc.getElementById('setting');
					  
					settingButton.addEventListener('tap', function(event) {
						$.openWindow({
							id: 'setting',
							show: {
								aniShow: 'pop-in'
							}, 
							styles: { 
								popGesture: 'hide'
							},
							waiting: {
								autoShow: true
							}
						});
					});
					
					 
					//-- 
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
			  
		</script>
	</body>

</html>